<template>
  <div id="" class="searchbox">
    <!--<span class="icon fa fa-search" style="font-size:18px;"></span>-->
    <span><img src="@/assets/images/search@2x.png" width="15" @click="searchCommunityName"/></span>
    <input type="search" name=""
    v-model="keyword" placeholder="搜索房源"
    @keyup.13="show($event)"
    id="searchIpt"
    v-on:input="searchEvent">
  </div>
</template>
<script>
import {mapState,mapMutations} from 'Vuex';
import { Toast } from 'mint-ui';

export default {
  name: "search",
  props: ['communityName'],
  data: () => ({
    keyword:''
  }),
  computed:{
    ...mapState({
      searchValue:state=>state.house.searchKey,
    })
  },
  methods: {
    ...mapMutations([
      'setSearchKey',
    ]),
    searchCommunityName() {   //搜索按钮
      // console.log(this.communityName);
      this.$emit('searchEvent',{
        searchValue:this.keyword
      });
      this.setSearchKey(this.keyword);
    },
    show(ev) {
      let that = this;
      if(ev.keyCode == 13){
        if(that.keyword==''){
          Toast('请输入搜索关键词');
        }else{
          // Toast(that.keyword);
          that.$emit('searchEvent',{
            searchValue:that.keyword
          });
        }
        this.setSearchKey(this.keyword);
      }
    },
    searchEvent() {
      console.log(this.keyword);
      this.$emit('searchKey',{
        searchValue:this.keyword
      })
    }
  },
  mounted() {
    //do something after mounting vue instance
    this.keyword = this.communityName;      //最好不要直接对props的值进行操作

    this.$nextTick(()=>{
      this.keyword = this.searchValue==''? this.communityName:this.searchValue;
      console.log(this.searchValue);
    })

  }
}
</script>
<style lang="scss" scoped>

.searchbox{
	@include flex;
	border: 1px solid $borderColor;
	border-radius: 4px;
	margin: 0 10px;
	padding: 0 10px;
  #searchIpt{
  	@include flexcell;
    border:none;
    outline:none;
    margin-left: 10px;
    background: none;
  }
}
</style>
